<template>
    <div>
        <div>
            <div style="padding: 0rem 1.5rem;font-size: 1rem; line-height: 1.93rem;text-align: left;">
            <el-date-picker style="cursor: pointer;" v-model="selectDate" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
            <span class="date">{{today}}</span>
            <!-- <span  id="isvaildReportLabel" style="font-size:18px;margin-left:30px">{{isvaildReportLabel}}</span> -->
            </div>
           <div id="main-container" class="alldivMonth">
            <div class='panel' id='alert-panel' style="margin-top: 20px;display: flex;justify-content: space-between;padding-right: 1.5rem;padding-left: 1.5rem;">
                <div id='chart-container'>
                    <div class='panel'>
                        <div class='card' id='change-summary' style="grid-row: span 2 / auto;">
                            <h2 class='uppercase' style='padding-bottom: 10pt'>综合比较表</h2>
                            <table id='shbjb' style="font-size:0.85rem">
                            </table>
                        </div>
                        <div class='card' id='rest'>
                            <h2>睡眠评分</h2>
                            <div class='chart'>
                                <div id="smpfMonthChart" style="float: left; width: 43rem; height: 300px; border-color: #F2F2F2 "></div>
                            </div>
                            <div class='legend'>
                                <h3 style='color: hsl(37.80000000000001, 100%, 43.9%); font-size: 1.1rem;'>&#8213; 夜间睡觉趋势线</h3>
                                <h3 style='color: #764B97; font-size: 1.1rem; margin-left: 40px'>&#9632; 夜间睡觉时间(小时)</h3>
                            </div>
                            <h3>历史数据分析:</h3>
                            <div class='stats' style="width:100%">

                                <table style="width:100%">
                                    <tr>
                                        <th style='color: #66b7b5;font-size: 10pt'>上周</th>
                                       

                                    </tr>
                                    <tr>
                                        <td style="font-size:18px">
                                            <label id="smpflastmonthh">{{smpflastmonthh}}</label>
                                            <span style="font-weight:100; font-size: 10pt; color:#66b7b5">分</span>
                                         
                                        </td>

                                        <td style="font-size:18px"><label id="smpcmonthchange"></label></td>

                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class='card' id='alert-chart' >
                            <h2 class='uppercase'>夜间离床次数</h2>
                            <div class='chart'>

                                <div id="yjlcMonthChart" style="float: left; width: 43rem; height: 300px; border-color: #F2F2F2 "></div>

                            </div>
                            <div class='legend' style="float:left">
                                <h3 style='color: #86B32D; font-size: 1.1rem; margin-left: 1px'>&#9632; 夜间离床次数</h3>

                            </div>
                            <div class='legend' style="float:left">
                                <label id="yjlcchange" style="font-size:14pt">{{yjlcchange}}</label><span style="font-weight:100; font-size: 10pt; color:#66b7b5">次</span>
                            </div>

                        </div>
                    </div>
                </div>
                <div id='chart-container2' style="width: 47rem;">
                    <div class='panel'>
                        <div class='card' id='rest'>
                            <h2>休息时间</h2>
                            <div class='chart'>
                                <h3>夜间睡觉时间 </h3>
                                <div id="yjsjMonthChart" style="float: left; width: 43rem; height: 300px; border-color: #F2F2F2"></div>

                            </div>
                            <div class='legend'>
                                <h3 style='color: hsl(37.80000000000001, 100%, 43.9%); font-size: 1.1rem;'>&#8213; 夜间睡觉趋势线</h3>
                                <h3 style='color: #764B97; font-size: 1.1rem; margin-left: 40px'>&#9632; 夜间睡觉时间(小时)</h3>
                            </div>
                            <h3>历史数据分析:</h3>
                            <div class='stats' style="width:100%">

                                <table style="width:100%">
                                    <tr>
                                        <th style='color: #66b7b5;font-size:10pt'>上周</th>
                                        <th style='color: #66b7b5;font-size:10pt'>相比前四周变化%</th>
                                    </tr>
                                    <tr>
                                        <td style="font-size:18px">
                                            <label id="yjsjlastweekh">{{yjsjlastweekh}}</label><span style='font-weight:100; font-size: 10pt; color:#774B97'>小时</span> <label id="yjsjlastweekm">{{yjsjlastweekm}}</label><span style='font-weight:100; font-size: 10pt; color:#774B97'>分钟</span>
                                        </td>
                                        <td style="font-size:18px"><label id="yjsjchange">{{yjsjchange}}</label></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class='card' id='alert-chart'>
                            <h2 class='uppercase'>夜间呼吸率</h2>
                            <div class='chart'>
                                <div id="syhxlMonthChart" style="float: left; width: 43rem; height: 300px; border-color: #F2F2F2 "></div>
                            </div>
                            <div class='legend' style="float:left">
                                <h3 style='color: hsl(37.80000000000001, 100%, 43.9%); font-size: 1.1rem;'>&#8213; 夜间呼吸率趋势线</h3>
                                <h3 style='color: #4fc8db; font-size: 1.1rem; margin-left: 50px'>&#9632; 夜间呼吸率</h3>
                            </div>
                            <div class='legend' style="float:left">
                                <label id="syhxlchange" style="font-size:14pt">{{syhxlchange}}</label><span style="font-weight:100; font-size: 10pt; color:#66b7b5">次/分钟</span>
                            </div>
                        </div>
                        <div class='card' id='alert-chart' style="margin-bottom:unset">
                            <h2 class='uppercase'>夜间心率</h2>
                            <div class='chart'>
                                <div id="syxlMonthChart" style="float: left; width: 43rem; height: 300px; border-color: #F2F2F2 "></div>
                            </div>
                            <div class='legend' style="float:left">
                                <h3 style='color: hsl(37.80000000000001, 100%, 43.9%); font-size: 1.1rem;'>&#8213; 夜间心率趋势线</h3>
                                <h3 style='color: #6b4fdb; font-size: 1.1rem; margin-left: 50px'>&#9632; 夜间心率</h3>
                            </div>
                            <div class='legend' style="float:left">
                                <label id="syxlchange" style="font-size:14pt">{{syxlchange}}</label><span style="font-weight:100; font-size: 10pt; color:#66b7b5">次/分钟</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           </div>
        </div>
    </div>
</template>

  <script>
  import { mapState } from "vuex";
  import { GetMonthreport } from "../../api/index";
  export default {
    name: "monthReport",
    components: {
    },
    computed: mapState({
      currentUserId: (state) => state.currentUserId, //当前的用户id
      userInfoDetails: (state) => state.userInfoDetails,//用户信息
    }),
    data() {
      return {
        today:'',
        selectDate: '',
        yjsjlastweekh:'',
        yjsjlastweekm:'',
        yjsjchange:'',
        syxlchange:'',
        syhxlchange:'',
        smpflastmonthh:'',
        yjlcchange:''
      };
    },
    created(){
        this.selectDate =  new Date().Format('yyyy-MM-dd')
        this.today = new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 30).Format('yyyy年MM月dd日')+'~'+new Date(new Date().getTime() - 24 * 60 * 60 * 1000).Format('yyyy年MM月dd日')
    },
    watch:{
        selectDate(val){
           this.today = new Date(new Date(val).getTime() - 24 * 60 * 60 * 1000 * 30).Format('yyyy年MM月dd日')+'~'+new Date(new Date(val).getTime() - 24 * 60 * 60 * 1000).Format('yyyy年MM月dd日')
           this.GetMonthreportFun()
       }
    },
    methods: {
        async GetMonthreportFun(){
            var This = this
            var data= {
                'userid':This.currentUserId,
                'date':new Date(new Date(This.selectDate).getTime() - 24 * 60 * 60 * 1000).Format('yyyy-MM-dd')//This.selectDate
            }
            await GetMonthreport(JSON.stringify(data)).then((data) => {
                data = data.data
                var yjsjx = [], yjsjy = [];
                //休息时间
                var xxsjqs=[]
                if (data.statistics_Sleep != null && data.statistics_Sleep.array_sleep != null) {
                    for (let i = 0; i < data.statistics_Sleep.array_sleep.length; i++) {
                        yjsjx.push(data.statistics_Sleep.array_sleep[i].day)
                        yjsjy.push((data.statistics_Sleep.array_sleep[i].duration / 60).toFixed(2))
                    }
                }
                if (data.statistics_Sleep != null && data.statistics_Sleep.array_sleep2 != null) {
                    for (let i = 0; i < data.statistics_Sleep.array_sleep2.length; i++) {
                        xxsjqs.push([data.statistics_Sleep.array_sleep2[i].day, (data.statistics_Sleep.array_sleep2[i].duration / 60).toFixed(2)])
                    }
                }
                var option = {
                    grid: {
                        left: '8%',
                        right: '15%',
                        bottom: '8%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: yjsjx,
                        "splitLine": {     //网格线
                            "show": true
                        },
                        axisLabel: {
                            //interval: 0,
                            rotate: 40
                        },
                        name: '日期'
                    },
                    yAxis: {
                        type: 'value',
                        name:'小时',
                        axisLine:{     //坐标轴
                            "show":true
                        },
                        axisTick: {		//x轴刻度线
                            show:true
                        },
                    },
                    series: [{
                        data: yjsjy,
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            normal: {
                                color: '#764B97' //改变区域颜色
                            }
                        },
                        symbol: 'circle',     //设定为实心点
                        symbolSize: 8,   //设定实心点的大小
                        itemStyle: {
                            normal: {
                                color: '#764B97',
                            },
                            lineStyle: {
                                width: 3,//设置线条粗细
                                color: '#764B97'
                            }
                        }

                    },
                        {
                            data: xxsjqs,
                            type: 'line',
                            symbol: 'none',  //取消折点圆圈
                            itemStyle: {
                                normal: {
                                    color: '#E08D00',
                                },
                                lineStyle: {
                                    width: 3,//设置线条粗细
                                    color: '#E08D00'
                                }
                            }

                        }]
                };
                let yjsjMonthChart = This.$echarts.init(document.getElementById('yjsjMonthChart'), 'macarons');
                yjsjMonthChart.clear();
                yjsjMonthChart.setOption(option);
                window.addEventListener("resize", function () {
                    yjsjMonthChart.resize();
                });
                This.yjsjlastweekh = data.statistics_Sleep ? parseInt(data.statistics_Sleep.avgDuration_LastWeek / 60) : 0
                This.yjsjlastweekm = data.statistics_Sleep ? data.statistics_Sleep.avgDuration_LastWeek % 60 : 0
                if(data.statistics_Sleep != null){
                    if (data.statistics_Step.change_Rate > 0) {
                        document.getElementById('yjsjchange').innerHTML = "<font style='color:red'>↑</font>" + data.statistics_Sleep.duration_Change_Rate.toFixed(2) + "%"
                    } else {
                        if (data.statistics_Step.change_Rate == 0) {
                            document.getElementById('yjsjchange').innerHTML = "<font >---</font>"
                        }
                        else {
                            document.getElementById('yjsjchange').innerHTML = "<font style='color:green'>↓</font>" + data.statistics_Sleep.duration_Change_Rate.toFixed(2).toString().replace('-', '') + "%"
                        }
                    }
                } else {
                    This.yjsjchange = '---'
                }
                //综合比较表
                var _html = ''
                document.getElementById('shbjb').innerHTML = ''
                if (data.statistics_CompareIndex != null) {
                    _html = "<tr style = 'height:37pt'>"
                    _html += "<th style='padding - bottom: 0'> </th>"
                    _html += "<th style='vertical - align: text - top; padding - bottom: 0'>上周的平均值</th>"
                    _html += "<th style='vertical - align: text - top; padding - bottom: 0'>过去2周变化</th>"
                    _html += "<th style='vertical - align: text - top; padding - bottom: 0'>过去1个月变化</th>"
                    _html += "</tr>"
                    //1
                    _html += "<tr id = 'chg-ace-index' bgcolor = '#E7E7E7' style = 'height: 3rem' >"
                    _html += "<th style='padding-left: 5pt'>上床(时间)</th>"
                    _html += "<td>" + data.statistics_CompareIndex.bed_time_lastweekavg + "</td>"
                    if (data.statistics_CompareIndex.bed_time_change_last2week > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.bed_time_change_last2week + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.bed_time_change_last2week == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.bed_time_change_last2week.toString().replace('-', '') + "%</font></td>"
                        }

                    }
                    if (data.statistics_CompareIndex.bed_time_change_last1month > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.bed_time_change_last1month + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.bed_time_change_last1month == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.bed_time_change_last1month.toString().replace('-', '') + "%</font></td>"
                        }

                    }
                    _html += "</tr>"
                    ////4
                    _html += "<tr id = 'chg-ace-index'  style = 'height: 3rem' >"
                    _html += "<th style='padding-left: 5pt'>睡觉(小时)</th>"
                    _html += "<td>" + (data.statistics_CompareIndex.sleep_duration_lastweekavg / 60).toFixed(2) + "</td>"
                    if (data.statistics_CompareIndex.sleep_duration_change_last2week > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.sleep_duration_change_last2week + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.sleep_duration_change_last2week == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.sleep_duration_change_last2week.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                    if (data.statistics_CompareIndex.sleep_duration_change_last1month > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.sleep_duration_change_last1month + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.sleep_duration_change_last1month == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.sleep_duration_change_last1month.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                    ////5
                    _html += "<tr id = 'chg-ace-index' bgcolor = '#E7E7E7' style = 'height: 3rem' >"
                    _html += "<th style='padding-left: 5pt'>起夜(次数)</th>"
                    _html += "<td>" + data.statistics_CompareIndex.nightup_count_lastweekavg + "</td>"
                    if (data.statistics_CompareIndex.nightup_count_change_last2week > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.nightup_count_change_last2week + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.nightup_count_change_last2week == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.nightup_count_change_last2week.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                    if (data.statistics_CompareIndex.nightup_count_change_last1month > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.nightup_count_change_last1month + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.nightup_count_change_last1month == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.nightup_count_change_last1month.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                    _html += "</tr>"
                    ////6
                    _html += "<tr id = 'chg-ace-index'  style = 'height: 3rem' >"
                    _html += "<th style='padding-left: 5pt'>起床(时间)</th>"
                    _html += "<td>" + data.statistics_CompareIndex.getup_time_lastweekavg + "</td>"
                    if (data.statistics_CompareIndex.getup_time_change_last2week > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.getup_time_change_last2week + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.getup_time_change_last2week == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.getup_time_change_last2week.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                    if (data.statistics_CompareIndex.getup_time_change_last1month > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.getup_time_change_last1month + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.getup_time_change_last1month == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.getup_time_change_last1month.toString().replace('-', '') + "%</font></td>"
                        }

                    }
                    ////11
                    _html += "<tr id = 'chg-ace-index' bgcolor = '#E7E7E7'   style = 'height: 3rem' >"
                    _html += "<th style='padding-left: 5pt'>睡眠评分</th>"
                    _html += "<td>" + data.statistics_CompareIndex.sleepscore_avg_lastweekavg + "</td>"
                    if (data.statistics_CompareIndex.sleepscore_avg_change_last2week > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.sleepscore_avg_change_last2week + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.sleepscore_avg_change_last2week == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.sleepscore_avg_change_last2week.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                    if (data.statistics_CompareIndex.sleepscore_avg_change_last1month > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.sleepscore_avg_change_last1month + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.sleepscore_avg_change_last1month == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.sleepscore_avg_change_last1month.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                    _html += "</tr>"
                    //18
                    _html += "<tr id = 'chg-ace-index'   style = 'height: 3rem' >"
                    _html += "<th style='padding-left: 5pt'>夜间心率(次/分钟)</th>"
                    _html += "<td>" + data.statistics_CompareIndex.sleepbedheartrateAvgLastweekavg + "</td>"
                    if (data.statistics_CompareIndex.sleepbedheartrateAvgChangeLast2week > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.sleepbedheartrateAvgChangeLast2week + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.sleepbedheartrateAvgChangeLast2week == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.sleepbedheartrateAvgChangeLast2week.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                    if (data.statistics_CompareIndex.sleepbedheartrateAvgChangeLast1month > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.sleepbedheartrateAvgChangeLast1month + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.sleepbedheartrateAvgChangeLast1month == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.sleepbedheartrateAvgChangeLast1month.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                    _html += "</tr>"
                    ///19
                    _html += "<tr id = 'chg-ace-index' bgcolor = '#E7E7E7'    style = 'height: 3rem' >"
                    _html += "<th style='padding-left: 5pt'>夜间呼吸率(次/分钟)</th>"
                    _html += "<td>" + data.statistics_CompareIndex.spo2_avg_lastweekavg + "</td>"
                    if (data.statistics_CompareIndex.sleepbedbreathAvgLastweekavg > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.sleepbedbreathAvgChangeLast2week + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.sleepbedbreathAvgChangeLast2week == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.sleepbedbreathAvgChangeLast2week.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                    if (data.statistics_CompareIndex.sleepbedbreathAvgChangeLast1month > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.sleepbedbreathAvgChangeLast1month + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.sleepbedbreathAvgChangeLast1month == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.sleepbedbreathAvgChangeLast1month.toString().replace('-', '') + "%</font></td>"
                        }

                    }
                    _html += "</tr>"
                    //30
                    _html += "<tr id = 'chg-ace-index'   style = 'height: 3rem' >"
                    _html += "<th style='padding-left: 5pt'>夜间离床次数(次)</th>"
                    _html += "<td>" + data.statistics_CompareIndex.nightbedleaving_count_lastweekavg + "</td>"
                    if (data.statistics_CompareIndex.nightbedleaving_count_change_last2week > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.nightbedleaving_count_change_last2week + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.nightbedleaving_count_change_last2week == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.nightbedleaving_count_change_last2week.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                    if (data.statistics_CompareIndex.nightbedleaving_count_change_last1month > 0) {
                        _html += "<td><font color='red'>&#8593 " + data.statistics_CompareIndex.nightbedleaving_count_change_last1month + "%</font></td>"
                    } else {
                        if (data.statistics_CompareIndex.nightbedleaving_count_change_last1month == 0) {
                            _html += "<td>---</td>"
                        } else {
                            _html += "<td><font color='green'>&#8595 " + data.statistics_CompareIndex.nightbedleaving_count_change_last1month.toString().replace('-', '') + "%</font></td>"
                        }
                    }
                } else {
                    _html = "<tr style = 'height:37pt'>"
                    _html += "<th style='padding - bottom: 0'> </th>"
                    _html += "<th style='vertical - align: text - top; padding - bottom: 0'>上周的平均值</th>"
                    _html += "<th style='vertical - align: text - top; padding - bottom: 0'>过去4周的变化</th>"
                    _html += "<th style='vertical - align: text - top; padding - bottom: 0'>过去3个月的变化</th>"
                    _html += "</tr>"
                    //1
                    _html += "<tr id = 'chg-ace-index' bgcolor = '#E7E7E7' style = 'height: 3rem' >"
                    _html += "<th style='padding-left: 5pt'>上床(时间)</th>"
                    _html += "<td>---</td>"
                    _html += "<td><font>---</font></td>"
                    _html += "<td><font>---</font></td>"
                    _html += "</tr>"
                    ////4
                    _html += '<tr id = "chg-ace-index" style = "height:3rem" >'
                    _html += '<th style="padding-left: 5pt">睡觉(小时)</th>'
                    _html += "<td>---</td>"
                    _html += "<td><font>---</font></td>"
                    _html += "<td><font>---</font></td>"
                    _html += '</tr>'
                    ////5
                    _html += '<tr id = "chg-ace-index" bgcolor = "#E7E7E7" style = "height:3rem" >'
                    _html += '<th style="padding-left: 5pt">起夜(次数)</th>'
                    _html += "<td>---</td>"
                    _html += "<td><font>---</font></td>"
                    _html += "<td><font>---</font></td>"
                    _html += '</tr>'
                    ////6
                    _html += '<tr id = "chg-ace-index" style = "height:3rem" >'
                    _html += '<th style="padding-left: 5pt">起床(时间)</th>'
                    _html += "<td>---</td>"
                    _html += "<td><font>---</font></td>"
                    _html += "<td><font>---</font></td>"
                    _html += '</tr>'
                    //7
                    _html += '<tr id = "chg-ace-index"  bgcolor = "#E7E7E7" style = "height:3rem" >'
                    _html += '<th style="padding-left: 5pt">睡眠评分</th>'
                    _html += "<td>---</td>"
                    _html += "<td><font>---</font></td>"
                    _html += "<td><font>---</font></td>"
                    _html += '</tr>'
                    ////18
                    _html += '<tr id = "chg-ace-index" style = "height:3rem" >'
                    _html += '<th style="padding-left: 5pt">夜间心率(次/分钟)</th>'
                    _html += "<td>---</td>"
                    _html += "<td><font>---</font></td>"
                    _html += "<td><font>---</font></td>"
                    _html += '</tr>'
                    ////19
                    _html += '<tr id = "chg-ace-index" bgcolor = "#E7E7E7" style = "height:3rem" >'
                    _html += '<th style="padding-left: 5pt">夜间呼吸率(次/分钟)</th>'
                    _html += "<td>---</td>"
                    _html += "<td><font>---</font></td>"
                    _html += "<td><font>---</font></td>"
                    _html += '</tr>'
                    ////30
                    _html += '<tr id = "chg-ace-index" style = "height:3rem" >'
                    _html += '<th style="padding-left: 5pt">夜间离床次数(次)</th>'
                    _html += "<td>---</td>"
                    _html += "<td><font>---</font></td>"
                    _html += "<td><font>---</font></td>"
                    _html += '</tr>'
                }
                document.getElementById('shbjb').innerHTML = _html
                //心率
                var syxlx = [], syxly = [], syxlyqs = []
                if (data.sleep_Heartrate != null) {
                    if (data.sleep_Heartrate.array_sleep_heartRate.length > 0) {
                        for (var i = 0; i < data.sleep_Heartrate.array_sleep_heartRate.length; i++) {
                            syxlx.push(data.sleep_Heartrate.array_sleep_heartRate[i].day)
                            syxly.push(data.sleep_Heartrate.array_sleep_heartRate[i].sleepHeartRate)
                        }
                    }
                }
                if (data.sleep_Heartrate != null) {
                    if (data.sleep_Heartrate.array_sleep_heartRate2 != null) {
                        for (let i = 0; i < data.sleep_Heartrate.array_sleep_heartRate2.length; i++) {
                            syxlyqs.push([data.sleep_Heartrate.array_sleep_heartRate2[i].day, data.sleep_Heartrate.array_sleep_heartRate2[i].sleepHeartRate])
                        }
                    }
                }
                option = {
                    grid: {
                        left: '8%',
                        right: '15%',
                        bottom: '8%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: syxlx,
                        "splitLine": {     //网格线
                            "show": true
                        },
                        axisLabel: {
                            //interval: 0,
                            rotate: 40
                        },
                        name: '日期'
                    },
                    yAxis: {
                        type: 'value',
                        name: '次/分钟',
                           axisLine:{     //坐标轴
                            "show":true
                        },
                       axisTick: {		//x轴刻度线
                            show:true
                        },
                    },
                    series: [{
                        data: syxly,
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            normal: {
                                color: '#6b4fdb' //改变区域颜色
                            }
                        },
                        symbol: 'circle',     //设定为实心点
                        symbolSize: 8,   //设定实心点的大小
                        itemStyle: {
                            normal: {
                                color: '#6b4fdb',
                            },
                            lineStyle: {
                                width: 3,//设置线条粗细
                                color: '#66B7B5'
                            }
                        }

                    },
                    {
                        data: syxlyqs,
                        type: 'line',
                        symbol: 'none',  //取消折点圆圈
                        itemStyle: {
                            normal: {
                                color: '#E08D00',
                            },
                            lineStyle: {
                                width: 3,//设置线条粗细
                                color: '#E08D00'
                            }
                        }

                    }]
                };
                let syxlMonthChart = This.$echarts.init(document.getElementById('syxlMonthChart'), 'macarons');
                syxlMonthChart.clear();
                syxlMonthChart.setOption(option);  
                window.addEventListener("resize", function () {
                        syxlMonthChart.resize();
                });
                This.syxlchange = data.sleep_Heartrate ? (data.sleep_Heartrate.avg ? data.sleep_Heartrate.avg : 0) : 0
                //呼吸率
                var syhxlx = [], syhxly = [], syhxlyqs = []
                if(data.sleep_Breath && data.sleep_Breath.array_sleep_breath != null){
                    for (let i = 0; i < data.sleep_Breath.array_sleep_breath.length; i++) {
                        syhxlx.push(data.sleep_Breath.array_sleep_breath[i].day)
                        syhxly.push(data.sleep_Breath.array_sleep_breath[i].sleepBreath)
                    }
                    if (data.sleep_Breath.array_sleep_breath2 != null) {
                        for (let i = 0; i < data.sleep_Breath.array_sleep_breath.length; i++) {
                            syhxlyqs.push([data.sleep_Breath.array_sleep_breath[i].day, data.sleep_Breath.array_sleep_breath[i].sleepBreath])
                        }
                    }
                }
                option = {
                    grid: {
                        left: '8%',
                        right: '15%',
                        bottom: '8%',
                        containLabel: true
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: syhxlx,
                        "splitLine": {     //网格线
                            "show": true
                        },
                        axisLabel: {
                            //interval: 0,
                            rotate: 40
                        },
                        name: '日期'
                    },
                    yAxis: {
                        type: 'value',
                        name: '次/分钟',
                           axisLine:{     //坐标轴
                            "show":true
                        },
                        axisTick: {		//x轴刻度线
                            show:true
                        },
                    },
                    series: [{
                        data: syhxly,
                        type: 'line',
                        areaStyle: {
                            normal: {
                                color: '#4fc8db' //改变区域颜色
                            }
                        },
                        smooth: true,
                        symbol: 'circle',     //设定为实心点
                        symbolSize: 8,   //设定实心点的大小
                        itemStyle: {
                            normal: {
                                color: '#4fc8db',
                            },
                            lineStyle: {
                                width: 3,//设置线条粗细
                                color: '#66B7B5'
                            }
                        }

                    },
                    {
                        data: syhxlyqs,
                        type: 'line',
                        symbol: 'none',  //取消折点圆圈
                        itemStyle: {
                            normal: {
                                color: '#E08D00',
                            },
                            lineStyle: {
                                width: 3,//设置线条粗细
                                color: '#E08D00'
                            }
                        }

                    }]
                };
                let syhxlMonthChart = This.$echarts.init(document.getElementById('syhxlMonthChart'), 'macarons');
                syhxlMonthChart.clear();
                syhxlMonthChart.setOption(option);
                window.addEventListener("resize", function () {
                    syhxlMonthChart.resize();
                });
                This.syhxlchange = data.sleep_Breath ? (data.sleep_Breath.avg ? data.sleep_Breath.avg : 0) : 0
                //睡眠评分
                var smpfMonthx = [], smpfMonthy=[],smpfsq=[]
                if (data.statistics_SleepScore != null) {
                    for (let i = 0; i < data.statistics_SleepScore.array_sleepScore.length; i++) {
                        smpfMonthx.push(data.statistics_SleepScore.array_sleepScore[i].day)
                        smpfMonthy.push(data.statistics_SleepScore.array_sleepScore[i].score)
                    }
                    if (data.statistics_SleepScore.array_sleepScore2 != null) {
                        for (let i = 0; i < data.statistics_SleepScore.array_sleepScore2.length; i++) {
                            smpfsq.push([data.statistics_SleepScore.array_sleepScore2[i].day, data.statistics_SleepScore.array_sleepScore2[i].score])
                        }
                    }
                }
                let option2 = {
                    grid: {
                        left: '8%',
                        right: '15%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: smpfMonthx,
                        axisLabel: {
                            //interval: 0,
                            rotate: 40
                        },
                        name: '日期'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    yAxis: {
                        type: 'value',
                        name: '分数',
                           axisLine:{     //坐标轴
                            "show":true
                        },
                       axisTick: {		//x轴刻度线
                            show:true
                        },
                    },
                    series: [
                        {
                            data: smpfMonthy,
                            type: 'line',
                            color: "#C6A300",
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(220, 220, 220, 0.8)'
                            },
                            areaStyle: {
                                normal: {
                                    color: '#6E84D6' //改变区域颜色
                                }
                            },
                            smooth: true,
                            symbol: 'circle',     //设定为实心点
                            symbolSize: 8,   //设定实心点的大小
                            itemStyle: {
                                normal: {
                                    color: '#6E84D6',
                                },
                                lineStyle: {
                                    width: 3,//设置线条粗细
                                    color: '#6E84D6'
                                }
                            }
                        },
                        {
                            data: smpfsq,
                            type: 'line',
                            symbol: 'none',  //取消折点圆圈
                            itemStyle: {
                                normal: {
                                    color: '#E08D00',
                                },
                                lineStyle: {
                                    width: 3,//设置线条粗细
                                    color: '#E08D00'
                                }
                            }

                        }]
                };
                let smpfMonthChart = This.$echarts.init(document.getElementById('smpfMonthChart'), 'macarons');
                smpfMonthChart.clear();
                smpfMonthChart.setOption(option2);
                This.smpflastmonthh = data.statistics_SleepScore ? (data.statistics_SleepScore.avg ? data.statistics_SleepScore.avg : 0) : 0
                window.addEventListener("resize", function () {
                    smpfMonthChart.resize();
                });
                //夜间离床次数
                var yjlcx = [], yjlcy = []
                if (data.statistics_NightBedLeaving != null) {
                    for (let i = 0; i < data.statistics_NightBedLeaving.array_NightBedLeaving.length; i++) {
                        yjlcx.push(data.statistics_NightBedLeaving.array_NightBedLeaving[i].day)
                        yjlcy.push(data.statistics_NightBedLeaving.array_NightBedLeaving[i].count)
                    }
                }
                option = {
                    grid: {
                        left: '8%',
                        right: '15%',
                        bottom: '8%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: yjlcx,
                        axisLabel: {
                            //interval: 0,
                            rotate: 40
                        },
                        name: '日期'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    yAxis: {
                        type: 'value',
                        name: '次',
                           axisLine:{     //坐标轴
                            "show":true
                        },
                        axisTick: {		//x轴刻度线
                            show:true
                        },
                    },
                    series: [{
                        data: yjlcy,
                        type: 'bar',
                        color: "#a2a9e0",
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }]
                };
                let yjlcMonthChart = This.$echarts.init(document.getElementById('yjlcMonthChart'), 'macarons');
                yjlcMonthChart.clear();
                yjlcMonthChart.setOption(option);
                This.yjlcchange = data.statistics_NightBedLeaving ? data.statistics_NightBedLeaving.avg : '0'
                window.addEventListener("resize", function () {
                    yjlcMonthChart.resize();
                });
            })
        },
        logout() {
            this.$router.push("/")
        }
    }
  }
  </script>

  <style scoped>
  .topIcon,
  .topIcon img {
    width: 3.5rem;
    height: 3.5rem;
    margin-right: 2rem;
    position: absolute;
    right: 0;
    top: 1rem;
    cursor: pointer;
    z-index: 1;
  }
  .date{
    font-size: 1.3rem;
    font-weight: bold;
    color: rgb(142,110,172);
    line-height: 40px;margin-left: 12px;
  }

  h2{
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15pt;
  }

.card {
   background-size: cover;
    background-color: #FAFAFA;
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 14px 21px 0 rgb(0 0 0 / 20%), inset 0 0.5px 0.7px 0 rgb(0 0 0 / 20%);
    display: flex;
    flex-direction: column;
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
    position: relative;
    width: 41rem;
    height: auto;
    margin-bottom: 1rem;
}
#adl-container {
    padding: 0.9rem 1.8rem;
}
.panel {
    display: grid;
    grid-row-gap: 15pt;
    grid-template-rows: min-content;
    height: min-content;
    margin-right: 1.2rem;
    width: 50%;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    text-align: left;
}
#chart-container2 .panel{
    margin-right: unset;
}
#main-container {
    display: flex;
    width: 100%;
    /* margin: 13pt; */
    /* grid-template-columns: 1fr 4fr; */
}
.legend > h3 {
    white-space: nowrap;
    margin-bottom: 3pt;
    margin-top: 20px;
}
h2{
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 15pt;
}
.card h3 {
    font-size: 1.2rem;
    font-weight: normal;
}
.legend {
    display: flex;
    flex-wrap: wrap;
    margin: 10pt 0 0 0;
    /* padding: 0 10pt 0 30pt; */
}
#shbjb tr:nth-child(1) {
    height: 37pt !important;
}
#shbjb tr {
    height: 3.34rem !important;
}

  </style>